<!-- 定期 -->
<template>
	<view>
		<view class="title">
			<view class="left">
				<view style="margin-bottom: 10rpx;">-甄选优质理财产品</view>
				<view>-严选持牌金融机构</view>
			</view>
			<view class="right">
				<view style="margin-bottom: 10rpx;">-甄选优质理财产品</view>
				<view>-严选持牌金融机构</view>
			</view>
		</view>

		<view class="outer">

			<!-- 排序 -->
			<view class="sort_cont">
				<view class="sort1" @click="sort1">
					收益率由高到低
					<u-icon v-if="iconshow" style="margin-left: 8rpx;" color="gray" name="arrow-down-fill"></u-icon>
					<u-icon v-else style="margin-left: 8rpx;" color="gray" name="arrow-up-fill"></u-icon>
				</view>
				<view class="sort2" @click="sort2">
					全部期限
					<u-icon v-if="iconshow2" style="margin-left: 8rpx;" color="gray" name="arrow-down-fill"></u-icon>
					<u-icon v-else style="margin-left: 8rpx;" color="gray" name="arrow-up-fill"></u-icon>
				</view>
			</view>

			<!-- 产品内容 -->
			<block v-for="item in msgs" :key="item.id">
				<view class="goods">
					<view class="goods_title">
						<text>{{item.prdBrief}}</text>
						<u-tag border-color='white' size="mini" type="warning" text="收益保障" />
						<u-tag border-color='white' size="mini" type="warning" text="中风险" />
					</view>
					<view class="content">
						<view class="left">
							<text class="t1">{{item.showExpectedReturn.substring(0,5) || "5.00%"}}</text>
							<br />
							<text class="t2">七日年化收益率</text>
						</view>
						<view class="right">
							<text class="t3"></text><text class="t4">{{item.term}}</text>
							<br />
							<text class="t2">投资期限</text>
						</view>
						<view class="btn">
							立即购买
						</view>
					</view>
					<u-line color="gray" />
				</view>
			</block>
			
			
			<view style='margin-top: 68rpx;'><u-divider color="#6d6d6d" >没有更多了</u-divider></view>
			
		</view>
	</view>

</template>

<script>
	import apis from "@/api/apis.js"
	export default {
		data() {
			return {
				iconshow: true,
				iconshow2: true,
				msgs:[]
			}
		},
		methods: {
			sort1() {
				this.iconshow = !this.iconshow
			},
			sort2() {
				this.iconshow2 = !this.iconshow2
			}
		},
		async onShow() {
			const msg = await apis.financial.getFinancialmsg()
			this.msgs = msg;
			console.log(msg)
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		height: 160rpx;
		background: url('/static/image/img_dingqi.png');
		background-size: cover;
		display: flex;
		justify-content: space-between;
		padding: 50rpx;

		view {
			view {
				color: #FFFFFF;
				font-weight: 700;
			}
		}
	}

	.outer {
		padding: 40rpx;

		.sort_cont {
			width: 380rpx;
			display: flex;
			justify-content: space-between;
		}

		.sort1 {
			width: 218rpx;
			height: 58rpx;
			background-color: #f3f5fe;
			border-radius: 4rpx;
			font-size: 24rpx;
			line-height: 58rpx;
			letter-spacing: 0rpx;
			color: #2e3033;
		}

		.sort2 {
			width: 146rpx;
			height: 58rpx;
			background-color: #f3f5fe;
			border-radius: 4rpx;
			line-height: 58rpx;
			font-size: 24rpx;
		}

		.goods {
			margin-top: 40rpx;
			height: 196rpx;

			.goods_title {
				font-size: 28rpx;
				u-tag{margin: 0 5rpx 0 10rpx;}
			}

			.content {
				position: relative;
				margin: 20rpx 0 36rpx 0;
				width: 450rpx;
				display: flex;
				justify-content: space-between;
				
				.left {
					width: 168rpx;
					height: 96rpx;

					.t1 {
						font-size: 48rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 58rpx;
						letter-spacing: 0rpx;
						color: #e74d45;
					}

					.t2 {
						font-size: 24rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 34rpx;
						letter-spacing: 0rpx;
						color: #bcc3cd;

					}
				}

				.right {
					width: 168rpx;
					height: 96rpx;

					.t3 {
						font-size: 40rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 50rpx;
						letter-spacing: 0rpx;
						color: #2e3033;
					}

					.t2 {
						font-size: 24rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 34rpx;
						letter-spacing: 0rpx;
						color: #bcc3cd;
						line-height: 58rpx;
					}

					.t4 {
						font-size: 24rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 34rpx;
						letter-spacing: 0rpx;
						color: #2e3033;
					}
				}
			}

			.btn {
				position: absolute;
				text-align: center;
				line-height: 50rpx;
				width: 136rpx;
				height: 50rpx;
				background-color: #3a6af6;
				border-radius: 4rpx;
				font-size: 24rpx;
				letter-spacing: 0rpx;
				color: #ffffff;
				right: -220rpx;
				top: 0;
			}
		}
	}
</style>
